<template>

  <van-search class=".search-box"
    v-model="value"
    placeholder="立柜式空调"
    shape="round"
    background="#4fc08d"
    :show-action="true"
    input-align="center"
    left-icon="iconfont icon-fangdajing"
    @click="toSearchIndex"
  >
    <template #left>
      <div @click="Location">西安</div>
    </template>
    <template #action>
      <div @click="onSearch">登录</div>
    </template>
    <template #left-icon>
      <div class="logo">
        <img src="../assets/logo.png">
      </div>
      <div class="xian"></div>
        <span class="iconfont icon-fangdajing"></span>
    </template>
  </van-search>

</template>


<script>
export default {
  name: "SearchBar",
  data() {
    return {
      value: "",
    };
  },
  methods: {
    Location(){},
    onSearch(){},
    toSearchIndex(){
      this.$router.push({ path: "/SearchIndex"})
    }
  },
};
</script>

<style scoped>
@import url("../assets/iconfonts/iconfont.css");

.search-box{
  margin-top: 0.5rem;
  height: 2rem;
  width: 100%;
  border-radius: 1rem;
  border: none;
  box-sizing: border-box;
  font-size: 12px;
}
.logo {
  height: 1.8rem;
  position: absolute;
  margin-left: 0.5rem;
}
img {
  width: 100%;
  height: 100%;
}
.icon-fangdajing {
  position: absolute;
  margin-left: 4.4rem;
  font-size: 22px;
  color: gray;
  font-weight: 300;
}
.xian{
  position: absolute;
  display: block;
  width: 0px;
  height: 1.5rem;
  border-left:2px solid gray;
  left:3.75rem;
  top:50%;;
  margin-top:-0.65rem ;
}
</style>